<html>
<head>
	<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
	<title>renderTex.xhtml</title>
    <script type="text/javascript" src="../x3dom-include.js"></script>
    
</head>
<body>
	<h1>Render Texture</h1>
    
	<div class="group">
    <X3D id='someUniqueId' showStat='true' showLog='true' width='512px' height='512px'>
      <Scene DEF='scene'>
        <Viewpoint id='view1' position='0 0 12'></Viewpoint>
        <Viewpoint id='view2' containerField='viewpoint' zNear="0.1" zFar="10000"
                   DEF='view2' position="0 0 -20" orientation="0 1 0 3.14159265" ></Viewpoint>
        <Background id='back' crossOrigin='anonymous' 
            backUrl="media/texture/generic/ocean_3_back.jpg"
            bottomUrl="media/texture/generic/ocean_3_bottom.jpg"
            frontUrl="media/texture/generic/ocean_3_front.jpg"
            leftUrl="media/texture/generic/ocean_3_left.jpg"
            rightUrl="media/texture/generic/ocean_3_right.jpg"
            topUrl="media/texture/generic/ocean_3_top.jpg"
            skyAngle='0.9 1.5 1.57' skyColor='0.21 0.18 0.66 0.2 0.44 0.85 0.51 0.81 0.95 0.77 0.8 0.82' 
            groundAngle='0.9 1.5 1.57' groundColor='0.6 0.7 0.1 0.4 0.7 0.2 0.1 0.6 0.1 0 0.3 0.1'
        ></Background>
        <Transform DEF='trans1' translation='-2 2 0'>
          <Shape DEF='GEO'>
            <Appearance>
              <ImageTexture crossOrigin='anonymous' repeatS='false' repeatT='false' url='"media/texture/generic/crate.gif"'></ImageTexture>
            </Appearance>
            <Box ></Box>
          </Shape>
        </Transform>
        <Transform DEF='trans2' translation='2 2 0'>
          <Shape USE='GEO'></Shape>
        </Transform>
        <Transform DEF='trans3' translation='-2 -2 0'>
          <Shape USE='GEO'></Shape>
        </Transform>
        <Transform DEF='trans4' translation='2 -2 0'>
          <Shape USE='GEO'></Shape>
        </Transform>
        <Transform DEF='trans' translation='0 0 -10'>
          <Transform DEF='matTrans'>
            <Shape DEF='aNode'>
              <IndexedFaceSet solid="false" coordIndex='0 1 2 3 -1'>
                <Coordinate point='-4 -4 0, 4 -4 0, 4 4 0, -4 4 0'></Coordinate>
                <TextureCoordinate point='0 1, 1 1, 1 0, 0 0'></TextureCoordinate><!-- y flipped -->
              </IndexedFaceSet>
              <Appearance DEF='rtApp'>
                <RenderedTexture DEF='FBO' update='always' dimensions='512 512 4'>
                  <Shape USE='aNode' containerField='excludeNodes' ></Shape>
                  <Background USE='back' containerField='background' ></Background>
                  <Viewpoint DEF='view3' containerField='viewpoint' zNear="1" zFar="1000" ></Viewpoint>
                  <Group>
                     <Shape DEF="sphereShape">
						<Appearance>
							<Material diffuseColor="1 0 0" specularColor=".5 .5 .5" ></Material>
						</Appearance>
						<Sphere ></Sphere>
				     </Shape>
                     <Transform DEF='transRT' translation='4 0 0'>
                        <Shape USE='GEO'></Shape>
                     </Transform>
                  </Group>
                  <textureProperties boundaryModeS='CLAMP_TO_EDGE' boundaryModeT='CLAMP_TO_EDGE'
                                   magnificationFilter='LINEAR' minificationFilter='LINEAR_MIPMAP_LINEAR'
                                   generateMipMaps='true' id='texProps'>
                  </textureProperties>
                </RenderedTexture>
              </Appearance>
            </Shape>
          </Transform>
        </Transform>
        <TimeSensor DEF='ts' cycleInterval='10' loop='true' startTime='1'></TimeSensor>
        <OrientationInterpolator DEF='oi' key='0 0.25 0.5 0.75 1' keyValue='0 1 1 0 0 1 1 1.57 0 1 1 3.14 0 1 1 4.71 0 1 1 6.28'></OrientationInterpolator>
        <ROUTE fromNode='ts' fromField='fraction_changed' toNode='oi' toField='set_fraction'></ROUTE>
        <ROUTE fromNode='oi' fromField='value_changed' toNode='trans4' toField='set_rotation'></ROUTE>
        <ROUTE fromNode='oi' fromField='value_changed' toNode='trans3' toField='set_rotation'></ROUTE>
        <ROUTE fromNode='oi' fromField='value_changed' toNode='trans2' toField='set_rotation'></ROUTE>
        <ROUTE fromNode='oi' fromField='value_changed' toNode='trans1' toField='set_rotation'></ROUTE>
        <ROUTE fromNode='oi' fromField='value_changed' toNode='transRT' toField='set_rotation'></ROUTE>
      </Scene>
    </X3D>
	</div>
    <div class="group">    
	    <input type="button" value=" view1.bind "  onclick="document.getElementById('view1').setAttribute('bind','true');" />
		<input type="button" value=" view2.bind "  onclick="document.getElementById('view2').setAttribute('bind','true');" />
    </div>
  </body>
</html>
